<template>
  <div class="container">
    Vue页面
    <!-- 弹窗 -->
    <el-dialog title="弹窗" :visible.sync="show" width="50%" @close="cancel">
      <!-- append-to-body 窗中窗，免黑屏
          top="0" 距离顶部距离
          :destroy-on-close="true" 关闭销毁
          :close-on-click-modal="false"  dom外元素关闭
      -->
    </el-dialog>

    <!-- 侧弹窗 -->
    <el-drawer title="侧弹窗" :visible.sync="show1" size="50%" :before-close="cancel" center :destroy-on-close="true">
      <!--  :wrapperClosable="false" 点击空白关闭 
            :destroy-on-close="true" 关闭时销毁页面
            :before-close="cancel" 关闭时回调
      -->
    </el-drawer>

    <!-- form表单 -->
    <el-form :model="formList" ref="formList" :rules="rules" label-width="80px" :inline="false" size="normal">
      <el-form-item label="列1">
        <el-input v-model="formList.eg"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onConfirm">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
      <!-- v-loading="loading"加载 -->
    </el-form>

    <!-- table表格 -->
    <el-table :data="tableData.results" border stripe :height="offsetHeight" v-loading="loading" ref="tableData">
      <!-- row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> 树状解构 -->
      <!-- 多选 -->
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <!-- 序号 -->
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="eg" label="列1" min-width="80" align="center">
        <template slot-scope="{row}">
          {{row.eg}}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VuePage',
  components: {
    // 组件
  },
  props: {
    // 继承
  },
  data () {
    // 数据
    return {
      offsetHeight: document.documentElement.clientHeight - 500,
      show: false,
      show1: false,
      formList: {},
      rules: [
        {}
      ],
      pageNo: '1',
      pageSize: '10',
      tableData: [],
    }
  },
  created () {
    // 创建，dom元素未加载，data初始化
  },
  mounted () {
    // 加载,dom元素已经存在
    this.init()
  },
  methods: {
    // 方法
    init () {

    },
    cancel () {
      this.show = false
      this.show1 = false
    },
    // 通用接口调用方法写法
    async onConfirm () {
      this.loading = true
      const res = await this.$http('xxx', {
        val: '参数1'
      })
      this.$tips.success(res.errmsg)
      this.loading = true
    },
    // table分页
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
    remove () {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove1('1')
      }).catch(() => {

      });
    },
    remove1 (val) {
      console.log('参数是' + val);
    }
  },
  computed: {
    // 计算属性
  },
  watch: {
    // 监听属性
  }
}
</script>
<style lang="scss" scoped>
</style>
